<template>
  <view class="content" v-if="data">
    <view class="contenthd">
      <view class="let">
        <view class="img" @click="gotoUserInfo">
          <image :src="data.user_avatar"></image>
        </view>

        <view class="txt">
          <view class="tit" @click="gotoUserInfo">{{ data.user_name }}</view>

          <view class="location" v-if="data.address">
            <i class="iconfont icon-map-filling"></i>
            <view class="i">{{ data.address }}</view>
          </view>
        </view>
      </view>

      <view class="rig" v-if="showFollow">
        <view class="follow" :class="[isFollow[0]]" @click="$emit('follow')">
          {{ isFollow[1] }}
        </view>
      </view>
    </view>

    <view class="contBox">
      <view class="tit">{{ data.title }}</view>
      <rich-text class="html" :nodes="data.content"></rich-text>
    </view>

    <view class="goodsList">
      <view
        class="item"
        v-for="item of getGoodsList"
        :key="item.id"
        @click="$utils.toUrl(`/goods/goods/goods?id=${item.id}&video_id=${videoId}`, 'navigate')"
      >
        <view class="img">
          <image :src="item.cover_pic"></image>
        </view>

        <view class="txt">
          <view class="tit">{{ item.name }}</view>
          <view class="price">{{ item.price }}</view>
        </view>
      </view>
    </view>

    <view class="contentFd">
      <div class="let">
        {{ $t("videoGoods.detail.add") }} {{ data.add_time }}
      </div>

      <view class="rig">
        <view class="like" @click="showPopup = true">
          <i class="iconfont icon-cry"></i>
          <view class="text">{{ $t("videoGoods.detail.noLike") }}</view>
        </view>
      </view>
    </view>

    <u-popup
      mode="bottom"
      v-model="showPopup"
      :z-index="121"
      border-radius="24"
      safe-area-inset-bottom
      :maskCloseAble="false"
    >
      <view class="popBox">
        <view class="popup-title">
          <view class="let">
            {{ $t("videoGoods.detail.noLike") }}
          </view>

          <i class="iconfont icon-close" @click="showPopup = false"></i>
        </view>

        <view
          class="popItem"
          v-for="item of menus"
          :key="item.id"
          @click="nolike"
        >
          <view class="let">
            <i class="iconfont" :class="[item.icon]"></i>
            <view class="title">{{ item.title }}</view>
          </view>

          <view class="rig" v-if="item.showArrIcon">
            <i class="iconfont icon-arrow-right"></i>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return null;
      },
    },

    userId: {
      type: [Number, String],
      default: undefined,
    },
    videoId: {
      type: [Number, String],
      default: undefined,
    }
  },

  data() {
    return {
      showPopup: false,

      menus: [
        // {
        //   icon: "icon-cry",
        //   title: this.$t("videoGoods.detail.reduceSuchContent"),
        //   id: 0,
        //   showArrIcon: false,
        // },
        // {
        //   icon: "icon-block",
        //   title: this.$t("videoGoods.detail.noSeeAuthor"),
        //   id: 1,
        //   showArrIcon: false,
        // },
        {
          icon: "icon-prompt",
          title: this.$t("videoGoods.detail.accusation"),
          id: 2,
          showArrIcon: true,
        },
      ],
    };
  },

  computed: {
    getGoodsList() {
      let { data } = this;
      if (!data) {
        return [];
      }

      return data.goods ? data.goods.list : data.goods_list;
    },

    isFollow() {
      if (!this.data) {
        return false;
      }

      let _text = this.$t("videoGoods.list.follow"),
        _class = "";

      if (this.data.is_focus !== 0) {
        _text = this.$t("videoGoods.list.checkedFollow");
        _class = "on";
      }

      return [_class, _text];
    },

    showFollow() {
      let { userId, isFollow, data } = this;

      if (isFollow && String(data.user_id) !== userId) {
        return true;
      }
      return false;
    },
  },

  methods: {
    nolike() {
      this.$utils.toUrl(
        `/videoGoods/report/index?id=${this.data.id}`,
        "navigate"
      );
    },

    gotoUserInfo() {
      this.$utils.toUrl(
        `/videoGoods/userInfo/index?id=${this.data.user_id}`,
        "navigate"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 30rpx;
}

.contenthd {
  display: flex;
  align-items: center;

  .let {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;

    .img {
      margin-right: 16rpx;
      width: 80rpx;
      height: 80rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #f2eff7;
      }
    }

    .txt {
      flex: 1;
      overflow: hidden;

      .tit {
        font-size: 30rpx;
        color: #262626;
      }
    }
  }

  .location {
    display: flex;
    align-items: center;

    .i {
      flex: 1;
      font-size: 20rpx;
      color: #8c8c8c;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  .follow {
    width: 120rpx;
    height: 54rpx;
    line-height: 52rpx;
    text-align: center;
    border-radius: 32px;
    border: 1px solid #f82641;
    box-sizing: border-box;
    font-size: 26rpx;
    color: #f82641;

    &.on {
      background: #f82641;
      color: #fff;
    }
  }
}

.contBox {
  padding: 30rpx 0;
  color: #262626;

  .tit {
    padding-bottom: 10rpx;
    font-size: 32rpx;
    font-weight: bold;
  }

  .html {
    font-size: 28rpx;
    line-height: 44rpx;
  }
}

.goodsList {
  .item {
    display: flex;
    align-items: center;
    padding: 8rpx;
    background: #f5f5f5;
    border-radius: 12rpx;

    .img {
      margin-right: 20rpx;
      width: 90rpx;
      height: 90rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .txt {
      flex: 1;
      overflow: hidden;

      .tit {
        margin-bottom: 5rpx;
        overflow: hidden;
        font-size: 28rpx;
        color: #262626;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price {
        &:before {
          content: "¥";
          font-size: 24rpx;
        }

        font-size: 30rpx;
        color: #f0250e;
      }
    }
  }
}

.contentFd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26rpx 0;
  border-bottom: 1px solid #f2f2f2;

  .let {
    color: #8c8c8c;
    font-size: 22rpx;
  }

  .like {
    display: flex;
    align-items: center;
    padding: 4rpx 8rpx;
    border: 1px solid #818181;
    color: #8c8c8c;
    font-size: 22rpx;
    border-radius: 8rpx;

    .iconfont {
      margin: 2rpx 0 0 2rpx;
    }
  }
}

/*
  弹框样式 start
*/
.popup-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26rpx 0;

  .let {
    font-size: 32rpx;
    color: #262626;
    font-weight: bold;
  }

  .iconfont {
    font-size: 40rpx;
    color: #262626;
  }
}

.popBox {
  padding: 0 36rpx;
}
/*
  弹框样式 end
*/

.popItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120rpx;
  border-bottom: 1px solid #f8f8f8;

  &:last-of-type {
    border-bottom: 0;
  }

  .let {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;

    .title {
      font-size: 28rpx;
      font-weight: bold;
    }

    .iconfont {
      margin-right: 14rpx;
      font-size: 48rpx;
      color: #8c8c8c;
    }
  }

  .rig {
    .iconfont {
      font-size: 16rpx;
      color: #888;
    }
  }
}
</style>
